/*
消息主界面路由容器组件
 */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {List, Badge} from 'antd-mobile';
import QueueAnim from 'rc-queue-anim';

const Item = List.Item;
const Brief = Item.Brief;

class Message extends Component {
    render() {
        const {user} = this.props;
        const {users, chatMsgs} = this.props.chat;
        //对chatMsgs进行chat_id进行分组
        const lastMsgs = getLastMsgs(chatMsgs, user._id);

        return (
            <List style={{marginTop: 50, marginBottom: 50}}>
                <QueueAnim type='scale' delay={100}>
                    {
                        lastMsgs.map(msg => {
                            //得到目标用户的id
                            const targetUserId = msg.to == user._id ? msg.from : msg.to;
                            //得到目标用户的信息
                            const targetUser = users[targetUserId];
                            return (
                                <Item
                                    key={msg._id}
                                    extra={<Badge text={msg.unReadCount}/>}
                                    thumb={targetUser.header ? require(`../../assets/images/${targetUser.header}.png`) : null}
                                    arrow='horizontal'
                                    onClick={() => this.props.history.push(`/chat/${targetUserId}`)}
                                >
                                    {msg.content}
                                    <Brief>{targetUser.username}</Brief>
                                </Item>
                            )
                        })
                    }
                </QueueAnim>
            </List>
        )
    }
}

//对chatMsgs按chat_id进行分组,并得到每个组lastMsg组成的数组
/*
1.找出每个聊天的lastMsg，并用一个对象容器来保存{chat_id: lastMsg}
2.得到所有lastMsg的数组。
3.对数组进行排序。（按create_time的降序）
 */
function getLastMsgs(chatMsgs, userid) {
    // 1.找出每个聊天的lastMsg，并用一个对象容器来保存{chat_id: lastMsg}
    const lastMsgObjs = {};
    chatMsgs.forEach(msg => {
        //对msg进行个体的统计
        if (msg.to == userid && !msg.read) { //统计的是谁发给我的
            msg.unReadCount = 1;
        } else {
            msg.unReadCount = 0;
        }

        //得到msg的聊天标识id
        const chatId = msg.chat_id;
        //获取已保存的当前组件的lastMsg
        let lastMsg = lastMsgObjs[chatId];
        if (!lastMsg) { //当前msg就是所在组的lastMsg
            lastMsgObjs[chatId] = msg;
        } else {
            //保存已经统计的未读数量
            const unReadCount = lastMsg.unReadCount;
            //如果msg比lastMsg晚，就将msg保存为lastMsg
            if (msg.create_time > lastMsg.create_time) {
                lastMsgObjs[chatId] = msg;
            }
            //累加unReadCount并保存在最新的lastMsg上
            lastMsgObjs[chatId].unReadCount = unReadCount + msg.unReadCount;
        }
    });

    //2.得到所有lastMsg的数组。
    const lastMsg = Object.values(lastMsgObjs);//把所有属性值取出来

    //3.对数组进行排序。（按create_time的降序）
    lastMsg.sort(function (pre, next) { //如果结果少于0,将pre放在前面（反之相反）
        return pre.create_time - next.create_time;
    });

    return lastMsg;
}


export default connect(
    state => ({chat: state.chat, user: state.user}),
    {}
)(Message);